

<template>
  <div class="df_register">
    <div class="register_top"></div>

    <div class="form">
      <div class="form_logo">
        <img src="../../assets/image/login/regilogo.png" alt="" />
        <span style="cursor: pointer" @click="$router.go(-1)">返回登录</span>
      </div>

      <div class="register_form">
        <h2>欢迎注册</h2>

        <div class="register_tips">登录信息</div>

        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="1.3rem"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <span>手机号</span>
              <el-form-item prop="phone">
                <img
                  class="line"
                  src="../../assets/image/login/line.png"
                  alt=""
                />
                <el-input
                  ref="phone"
                  style="font-size: 0.2rem"
                  v-model="ruleForm.phone"
                  placeholder="请输入家长手机号"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <span>验证码</span>
              <el-form-item prop="code">
                <img
                  class="line"
                  src="../../assets/image/login/line.png"
                  alt=""
                />
                <el-input
                  style="font-size: 0.2rem; width: 2.06rem"
                  v-model="ruleForm.code"
                  placeholder="请输入验证码"
                ></el-input>
                <div class="code_btn" @click="codeBtn">{{codeNum | codeNum}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="register_tips">学生信息</div>
          <el-row>
            <el-col :span="12">
              <span>学生真实姓名</span>
              <el-form-item prop="realname">
                <img
                  class="line"
                  src="../../assets/image/login/line.png"
                  alt=""
                />
                <el-input
                  ref="realname"
                  style="font-size: 0.2rem"
                  v-model="ruleForm.realname"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span>所在公立学校</span>
              <el-form-item prop="school_name">
                <img
                  class="line"
                  src="../../assets/image/login/line.png"
                  alt=""
                />
                <el-input
                  style="font-size: 0.2rem"
                  v-model="ruleForm.school_name"
                  placeholder="请输入所在学校"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <span>所属年级</span>
              <el-form-item prop="class_id">
                <img
                  class="line"
                  src="../../assets/image/login/line.png"
                  alt=""
                />
                <el-select
                  v-model="ruleForm.class_id"
                  placeholder="请选择年级"
                  class="class_list"
                >
                  <el-option
                    style="width: 2rem"
                    v-for="item in ruleForm.classList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <span>所在地区</span>
              <el-form-item prop="province_id">
                <el-select
                  v-model="ruleForm.province_id"
                  placeholder="省"
                  style="margin-right: 0.02rem"
                >
                  <el-option
                    v-for="item in ruleForm.provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.city_id"
                  placeholder="市"
                  style="margin-right: 0.02rem"
                >
                  <el-option
                    v-for="item in ruleForm.cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.county_id"
                  placeholder="区"
                  style="margin-right: 0.02rem"
                >
                  <el-option
                    v-for="item in ruleForm.areaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <span>具体地址</span>
              <el-form-item prop="address">
                <img
                  class="line"
                  src="../../assets/image/login/line.png"
                  alt=""
                />
                <el-input
                  style="font-size: 0.2rem"
                  v-model="ruleForm.address"
                  placeholder="请输入具体地址"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-button
              style="
                width: 1.83rem;
                height: 0.55rem;
                background: #414cc2;
                margin-top: 0.1rem;
              "
              type="primary"
              @click="submitForm('ruleForm')"
              >注册</el-button
            >
          </el-row>
        </el-form>
      </div>
    </div>

    <!--    弹框-->
    <div
      class="bullet_frame"
      @click="showBulletFrame = false"
      v-if="showBulletFrame"
    >
      <div class="frame_cen">
        <img src="../../assets/image/login/frame_con.png" alt="" />
        <div class="go_pretest" @click="goPretest">进入前测</div>
        <span class="down">{{ regsuccNum }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// 手机号码校验
import { isPoneAvailable } from "@/config/utils";

export default {
  name: "register",
  data() {
    let phoneCheck = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      if (!isPoneAvailable(value)) {
        callback(new Error("请输入正确手机号！"));
      } else {
        this.isClickGetCode = true;
        callback();
      }
    };
    return {
      
      // 是否显示注册成功弹框
      showBulletFrame: false,
      // 验证码倒计时
      codeNum: "获取验证码",
      // 注册成功弹框倒计时
      regsuccNum: 10,
      // 获取验证码是否可以点击 默认无法点击
      isClickGetCode: false,
      ruleForm: {
        // 手机号
        phone: "",
        // 年级
        class_id: "",
        // 所在地区
        region: "",
        // 详细地区
        address: "",
        // 验证码
        code: "",
        // 学校
        school_name: "",
        // 省id
        province_id: "",
        // 市id
        city_id: "",
        // 区id
        county_id: "",
        // 省
        provinceList: [],
        // 市
        cityList: [],
        // 区
        areaList: [],
        // 班级列表
        classList: [],
        // 真实姓名
        realname: "",
      },
      rules: {
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
        realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        province_id: [
          { required: true, message: "请选择所在地区", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入具体地址", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        school_name: [
          { required: true, message: "请输入所在学校", trigger: "blur" },
        ],
        class_id: [
          { required: true, message: "请选择所属年级", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // 获取省份数据
    this.getProvinceList();
    // 获取班级列表
    this.getClassList();
    // 用户名高亮
    this.$refs.username.focus();
  },
  watch: {
    // 省份改变
    "ruleForm.province_id"(id) {
      // 获取市的数据
      this.getCityAndDistrictList(id, "city");
    },
    // 市区改变
    "ruleForm.city_id"(id) {
      this.getCityAndDistrictList(id, "area");
    },
    // 进入前测倒计时
    regsuccNum(num) {
      if (num === 0) {
        console.log("跳转页面");
      }
    },
  },
  methods: {
    submitForm(formName) {
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let {
            phone, 
            code,
            class_id,
            realname,
            province_id,
            city_id,
            county_id,
            address,
            school_name,
          } = that.ruleForm;
          that
            .$request({
              url: "register",
              method: "POST",
              data: {
                phone, 
                code,
                class_id,
                province_id,
                city_id,
                county_id,
                address,
                school_name,
                realname,
              },
            })
            .then(({ data }) => {
              if (data.code === 200) {
                that.$message({
                  message: "注册成功",
                  type: "success",
                });
                // 存储用户信息和token
                that.$store.commit("setUserInfo", data);
                // 注册成功
                that.showBulletFrame = true;
                let regsuccNumTime = setInterval(() => {
                  if (that.regsuccNum >= 1) {
                    that.regsuccNum -= 1;
                    return false;
                  }
                  clearInterval(regsuccNumTime);
                }, 1000);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取省份信息
    getProvinceList() {
      this.$request({
        url: "getProvinceList",
        method: "GET",
      }).then(({ data }) => {
        this.$set(this.ruleForm, "provinceList", data.data);
      });
    },
    // 获取城市信息
    getCityAndDistrictList(id, type) {
      this.$request({
        url: "cityAndDistrictList",
        method: "GET",
        params: {
          pid: id,
        },
      }).then(({ data }) => {
        if (type === "city") {
          this.$set(this.ruleForm, "cityList", data.data);
        } else {
          this.$set(this.ruleForm, "areaList", data.data);
        }
      });
    },
    // 获取班级列表
    getClassList() {
      this.$request({
        url: "getClassList",
        method: "GET",
      }).then(({ data }) => {
        this.$set(this.ruleForm, "classList", data.data);
      });
    },

    // 进入前测
    goPretest() {
      // 倒计时等于零后触发监听跳转页面
      this.regsuccNum = 0;
    },
    codeBtn() { 
      // 手机号校验
      if (!this.ruleForm.phone) {
        return this.$message({ message: "手机号不能为空！", type: "error" });
      }
      if (!isPoneAvailable(this.ruleForm.phone)) {
        return this.$message({
          message: "请输入正确的手机号！",
          type: "error",
        });
      }
      // 发送验证码
      this.$request({
        method: "POST",
        url: "send_sms",
        data: {
          phone: this.ruleForm.phone,
          name: "forget_password",
        },
      }).then(({ data }) => {
        if (data.code === 200) {
          // this.adoptCode = true;
          this.$message({ message: "信息发送成功！", type: "success" });
          if (this.codeNum === "获取验证码") {
            this.codeNum = 60;
            let codeTime = setInterval(() => {
              this.codeNum -= 1;
              if (this.codeNum === 0) {
                clearInterval(codeTime);
                this.codeNum = "获取验证码";
              }
            }, 1000);
          }
        }
      });
    },
  },
  filters: {
    codeNum(num) {
      if (num === "获取验证码") {
        return num;
      }
      return num + "秒";
    },
  },
};
</script>

<style lang="less" scoped>
.df_register {
  width: 100vw;
  height: 100vh;

  .register_top {
    height: 4.46rem;
    background: url("../../assets/image/login/registerback.png") no-repeat;
    background-size: 100% 100%;
  }

  .form {
    margin: -3.5rem auto 0 auto;
    width: 10.68rem;
  }

  .form_logo {
    display: flex;
    justify-content: space-between;
    top: 1.4rem;
    width: 10.68rem;
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.16rem;
    color: #fff;

    & > img {
      width: 2.15rem;
      height: 0.58rem;
    }
  }

  .register_form {
    padding: 0.5rem 0.9rem;
    width: 10.68rem;
    height: 8.2rem;
    box-shadow: 0 3px 24px 0 rgba(179, 183, 236, 0.41);
    border-radius: 0.1rem;
    background: #fff;
    font-size: 0.16rem;
    color: #3f3f3f;
    box-sizing: border-box;
    .register_tips {
      margin-bottom: 0.1rem;
      width: 100%;
      height: 0.42rem;
      line-height: 0.42rem;
      font-size: 0.18rem;
      font-weight: 700;
      color: #3f3f3f;
      border-bottom: 2px solid #eee;
    }
    span {
      font-size: 0.14rem;
    }
    .el-form-item {
      .line {
        position: absolute;
        right: 1.3rem;
        top: 0.2rem;
        width: 1rem;
        height: 1px;
        z-index: 10 !important;
      }
    }

    .code_btn {
      margin: auto 0 auto 0.1rem;
      width: 1.15rem;
      height: 0.57rem;
      line-height: 0.57rem;
      text-align: center;
      border-radius: 0.05rem;
      font-size: 0.16rem;
      color: #333;
      cursor: pointer;
      border: 2px solid #c9cced;
      box-sizing: border-box;
    }
  }

  .bullet_frame {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);

    .frame_cen {
      position: absolute;
      width: 3.83rem;
      height: 4.52rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .go_pretest {
        position: absolute;
        bottom: 0.4rem;
        left: 50%;
        transform: translateX(-50%);
        width: 1.5rem;
        height: 0.49rem;
        line-height: 0.49rem;
        text-align: center;
        color: #fff;
        font-size: 0.18rem;
        border-radius: 0.25rem;
        box-shadow: 0 1px 0 0 #6ae1ff,
          0 0.05rem 0.07rem 0 rgba(97, 108, 217, 0.45);
        background: linear-gradient(-69deg, #4150ff 0%, #4486ff 100%);
        cursor: pointer;
      }

      & > img {
        width: 100%;
      }

      .down {
        position: absolute;
        bottom: -0.2rem;
        left: 50%;
        transform: translateX(-50%);
        color: #67bdff;
        font-size: 0.16rem;
      }
    }
  }
}

// 修改所属年级样式
.class_list {
  width: 3rem;
  /deep/ & > .el-input {
    width: 3.3rem !important;
  }
}
</style>
